<template>
  <view class="myContract">
    <view :style="'--color:' + color + ';--rgbcolor:' + rgbcolor" class="homrHer">
      <view class="tabsFiex">
        <view class="hoerLeft">
        </view>
        <view class="tabsSwiper">
          <view class="hoerTopSwiper">
            <view v-for="( item,index ) in tabsList"
                  :key="index"
                  :class="['tabsItem']"
                  @tap="onTabs(item,index)"
            >
              <view :class="['name',{'activeName':activeIndex === index}]">{{ item.name }}</view>
            </view>
          </view>
          <view class="sliderBox">
            <view :style="{'width': sliderWidth, 'left': sliderLeft}"
                  class="slider">
              <view class="borderButton">
              </view>
            </view>
          </view>
        </view>
        <view class="hoerRight"></view>
      </view>
    </view>
    <view class="contract">
      <mescroll-body ref="mescrollRef" :up="upOption" @down="downCallback" @init="mescrollInit" @up="upCallback">
        <view class="contractList">
          <view v-for="(item,i) in currentItem " :key="item.id" class="contactItem" @tap="onCurrentItem(item)">
            <view class=" imgBox">
              <image :src="item.contract_path" class="m" mode="widthFix"></image>
            </view>
            <view class="contactButton">
              <view class="contactText">合同编号</view>
              <view class="contactId">{{ item.contract_code }}</view>
            </view>
          </view>
        </view>
      </mescroll-body>
    </view>
  </view>
</template>
<script>
import globalUtils from "../../res/www.a9a.cn";
import MescrollMixin from "../../uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import MescrollBody from "../../uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue";
import NavigationBar from "../../components/navigationBar/navigationBar.vue";

var app = getApp()
var r = uni.getStorageSync('COOK_U');
export default {
  name: "myContract",
  mixins: [MescrollMixin], // 使用mixin
  components: {MescrollBody, NavigationBar},
  data() {
    return {
      tabsList: [
        {
          id: 's0',
          name: '未签合同',
        },
        {
          id: 's2',
          name: '未审合同',
        },
        {
          id: 's1',
          name: '已审合同',
        },
      ],
      activeIndex: 0, // 选择项
      activeId: 's0', // 选择ID
      color: '',
      rgbcolor: '',
      upOption: {
        textNoMore: '已全部加载完毕',
        toTop: {
          use: false,
          src: '',
        },
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 8 //每页数据条数,默认10
        },
        empty: {
          use: true, // 启用空布局
          tip: '~ 暂时没有有符合条件的合同 ~', // 提示文字
        }
      },
      currentItem: []
    }
  },
  computed: {
    sliderWidth() {
      return `${100 / this.tabsList.length}%`;
    },
    sliderLeft() {
      return `${this.activeIndex * (100 / this.tabsList.length)}%`;
    },
  },
  onLoad() {
    const that = this;
    app.globalData.get_config('_ZEAI').then(function (a) {
      that.setData({
        color: app.globalData._ZEAI.color,
        rgbcolor: globalUtils.c16_rgb(app.globalData._ZEAI.color),
      });
    });
  },
  methods: {
    // 切换tabs栏
    onTabs(item, i) {
      this.activeId = item.id;
      this.activeIndex = i;
      this.mescroll.resetUpScroll();
    },
    // 合同详情
    onCurrentItem(item) {
      uni.navigateTo({
        url: `/myPages/contractDetails/contractDetails?currentId=${item.id}`
      })
    },
    /// 列表调用
    downCallback(mescroll) {
      mescroll.endSuccess();
      mescroll.resetUpScroll();
    },
    upCallback(mescroll) {
      this.init(mescroll)
    },
    // 获取数据
    init(mescroll) {
      const that = this;
      const data = {
        submitok: 'list',
        openid: (r = uni.getStorageSync('COOK_U')).openid,
        t: this.activeId,
        p: mescroll.num,
      };
      app.globalData.ajax({
        url: 'my_contract.php',
        data: data,
        success: function (a) {
          if ('1' === a.flag) {
            if (mescroll.num === 1) {
              that.currentItem = a.list;
            } else {
              that.currentItem = that.currentItem.concat(a.list);
            }
            mescroll.endSuccess(a.list.length, a.list.length >= mescroll
                .size);

          } else {
            uni.showToast({
              title: a.msg,
              icon: 'none',
              mask: true
            });
          }
        }
      });
    },
  },

}
</script>
<style lang="scss" scoped>
@import 'myContract.scss';
</style>